﻿<%@ Page Title="Index" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true"
     CodeBehind="Default.aspx.cs" Inherits="SampleSite.Default1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">

<h2>Index</h2>

<div>
    <table id="test" style="width: 700px" title="用户操作" iconcls="icon-edit"> 
    </table> 
</div>

<div>
    <h2>树形表格</h2>
</div>
<div>
    <table id="testTreeGrid" style="width: 700px" title="组织架构" iconcls="icon-edit"> 
    </table>
</div>

<script type="text/javascript">
    $(function () {
        //当页面首次刷新的时候执行的事件 
        initTable();
        initTreeGrid();
    });

    //实现对DataGird控件的绑定操作
    function initTable() {
        $('#test').datagrid({   //定位到Table标签，Table标签的ID是test
            url: '/ajax/GetAllUserInfos.ashx',
            title: '用户的展示',  //标识
            iconCls: 'icon-save',
            width: 500,
            height: 350,
            nowrap: true,
            autoRowHeight: false,
            striped: true,
            collapsible: true,
            pagination: true,
            rownumbers: true,
            sortName: 'id',
            sortOrder: 'asc',
            remoteSort: true,
            idField: 'ID',
            frozenColumns: [[
                { field: 'ck', checkbox: true },
                { title: '主键', field: 'id', width: 80, sortable: true, hidden: true },
                { title: '用户名', field: 'uname', width: 120, sortable: true },
                { title: '邮箱', field: 'email', width: 100, sortable: true }
            ]],
            toolbar: [{
                id: 'btnadd',
                text: '添加',
                iconCls: 'icon-add',
                handler: function () {
                    $('#btnsave').linkbutton('enable');
                }
            }, '-', {
                id: 'btnedit',
                text: '修改',
                iconCls: 'icon-edit',
                handler: function () {
                    $('#btncut').linkbutton('enable');
                }
            }, '-', {
                id: 'btndel',
                text: '删除',
                iconCls: 'icon-cancel'
            }],
            rowStyler: function (i, r) {
                if (r.uname == 'hy8hy8') {
                    return 'background:red;';
                }
            }
        });
    }

    function initTreeGrid() {
        $('#testTreeGrid').treegrid(
            {
                url: '/ajax/GetTreeNodes.ashx',
                title: '组织架构',
                rownumbers: true,
                idField: 'id',
                treeField: 'name',
                columns: [[
                    { title: '名称', field: 'name', width: 240, sortable: false },
                    {
                        title: '代号',
                        field: 'ename',
                        width: 100,
                        sortable: false
                    }
                ]]
            });
    }
</script>

</asp:Content>
